<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>销售台账</title>
    <th:block th:include="statics/common/page/header"></th:block>
</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList">
        <Row class="search-panel-space">
            <div class="search-group">
                <i-col span="5">
                	<label class="search-label-20">客户姓名:</label>
                    <i-input v-model="q.name" @on-enter="query" placeholder="客户姓名" class="search-item-width-75"/>
                </i-col>
				<i-col span="5">
					<label class="search-label-20">客户手机:</label>
					<i-input v-model="q.phone" @on-enter="query" placeholder="客户手机" class="search-item-width-75"/>
				</i-col>
				<i-col span="5">
					<label class="search-label-20">销售姓名:</label>
					<i-input v-model="q.personName" @on-enter="query" placeholder="销售姓名" class="search-item-width-75"/>
				</i-col>
				<i-col span="5">
					<label class="search-label-20">销售手机:</label>
					<i-input v-model="q.personPhone" @on-enter="query" placeholder="销售手机" class="search-item-width-75"/>
				</i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
        </Row>
		<Row class="search-panel-space">
			<i-col span="5">
				<label class="search-label-20">付款方式:</label>
				<i-select v-model="q.payment" placeholder="付款方式"  class="search-item-width-75">
					<i-option value="1">全款</i-option>
					<i-option value="2">分期</i-option>
				</i-select>
			</i-col>
			<i-col span="5">
				<label class="search-label-20">状态:</label>
				<i-select v-model="q.state" placeholder="状态"  class="search-item-width-75">
					<i-option value="1">待审批</i-option>
					<i-option value="2">代收定金</i-option>
					<i-option value="3">待分车</i-option>
					<i-option value="4">待付款</i-option>
					<i-option value="5">完成</i-option>
					<i-option value="9">作废</i-option>
				</i-select>
			</i-col>
		</Row>
        <Row :gutter="16">
            <div class="buttons-group">
                <i-button type="info" @click="add" th:if="${@shiroAuthService.hasPermission('salebook:save')}">
                	<i class="fa fa-plus"></i>&nbsp;新增</i-button>
                <i-button type="info" @click="update" th:if="${@shiroAuthService.hasPermission('salebook:update')}">
                	<i class="fa fa-plus"></i>&nbsp;修改</i-button>
                <i-button type="info" @click="depositBook" th:if="${@shiroAuthService.hasPermission('salebook:deposit')}">
                	<i class="fa fa-plus"></i>&nbsp;定金</i-button>
                <i-button type="warning" @click="allotCar" th:if="${@shiroAuthService.hasPermission('salebook:allot')}">
                	<i class="fa fa-pencil-square-o"></i>&nbsp;分配车辆</i-button>
                <i-button type="error" @click="approveBook" th:if="${@shiroAuthService.hasPermission('salebook:approve')}">
                	<i class="fa fa-trash-o"></i>&nbsp;审核</i-button>
                <i-button type="error" @click="receiptBook" th:if="${@shiroAuthService.hasPermission('salebook:receipt')}">
                	<i class="fa fa-trash-o"></i>&nbsp;收款</i-button>
                <i-button type="warning" @click="cancelBook" th:if="${@shiroAuthService.hasPermission('salebook:cancel')}">
                	<i class="fa fa-pencil-square-o"></i>&nbsp;作废</i-button>
                <i-button type="info" @click="detailBook" th:if="${@shiroAuthService.hasPermission('salebook:detail')}">
                	<i class="fa fa-info"></i>&nbsp;详情</i-button>
                <i-button type="info" @click="printDetail">
                	<i class="fa fa-info"></i>&nbsp;导出</i-button>
            </div>
        </Row>
	    <table id="jqGrid"></table>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
		<i-form ref="formValidate" :model="saleBook" :rules="ruleValidate" :label-width="80">
			<Form-item label="合同编号" prop="bookNo">
                <i-input v-model="saleBook.bookNo" placeholder="合同编号" v-bind:disabled="detailReadonly" readonly="readonly"/>
            </Form-item>
            <Form-item label="客户" prop="customerId">
                <i-input v-model="saleBook.customerName" placeholder="客户" icon="eye" readonly="readonly"
                         v-bind:disabled="!detailReadonly" @on-click="selectCustomer"/>
            </Form-item>
            <Form-item label="身份证" prop="idcard">
                <i-input v-model="saleBook.idcard" placeholder="身份证" v-bind:disabled="detailReadonly" />
            </Form-item>
            <Form-item label="地址" prop="address">
                <i-input v-model="saleBook.address" placeholder="地址" v-bind:disabled="detailReadonly"/>
            </Form-item>
            <Form-item label="电话信息" prop="tel">
                <i-input v-model="saleBook.tel" placeholder="电话信息" v-bind:disabled="detailReadonly"/>
            </Form-item>
            <Form-item label="定金" prop="deposit">
                <i-input v-model="saleBook.deposit" placeholder="定金" @on-change="changeResidue" v-bind:readonly="detailReadonly"/>
            </Form-item>
            <Form-item label="合同总价" prop="sumAmount">
                <i-input v-model="saleBook.sumAmount" placeholder="应付金额" @on-change="changeResidue" v-bind:readonly="detailReadonly"/>
            </Form-item>
            <Form-item label="尾款" prop="residue">
                <i-input v-model="saleBook.residue" placeholder="尾款" readonly="readonly" v-bind:readonly="detailReadonly"/>
            </Form-item>
            <template v-if="receiptOper">
            	<Form-item label="微信支付" prop="wxAmount">
	                <i-input v-model="saleBook.wxAmount" placeholder="微信支付"/>
	            </Form-item>
            	<Form-item label="支付宝支付" prop="zfbAmount">
	                <i-input v-model="saleBook.zfbAmount" placeholder="支付宝支付"/>
	            </Form-item>
            	<Form-item label="刷卡支付" prop="skAmount">
	                <i-input v-model="saleBook.skAmount" placeholder="刷卡支付"/>
	            </Form-item>
            	<Form-item label="现金支付" prop="xjAmount">
	                <i-input v-model="saleBook.xjAmount" placeholder="现金支付"/>
	            </Form-item>
            </template>
            <Form-item v-if="!detailReadonly">
                <i-button type="primary" @click="addStoreCar" >添加车辆</i-button>
            </Form-item>
            <template v-for="vo,index in saleBook.saleCarList" v-if="vo.showCar">
            	<row>
            		<i-col span="16">
	         		    <Form-item label="车型" prop="productCarName">
			                <i-input v-bind:disabled="!detailReadonly" v-model="vo.productCarName" placeholder="车型" icon="eye" readonly="readonly" @on-click="selectCarModel(index)" />
			            </Form-item>
            		</i-col>
            	</row>
            	<row v-if="allotOper">
            		<i-col span="16">
	         		    <Form-item label="车辆VIN" prop="vin">
			                <i-input v-model="vo.vin" placeholder="车辆VIN" icon="eye" readonly="readonly" @on-click="selectStoreCar(index)" />
			            </Form-item>
            		</i-col>
            	</row>
            	<row v-if="receiptOper">
            		<i-col span="16">
	         		    <Form-item label="车辆VIN" prop="vin">
			                <i-input v-model="vo.vin" placeholder="车辆VIN" readonly="readonly"/>
			            </Form-item>
            		</i-col>
            	</row>
           		<row>
           			<i-col span="8">
			            <Form-item label="单车售价" prop="sumCost">
			                <i-input v-model="vo.sumCost" placeholder="单车售价" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
            		<i-col span="8">
			            <Form-item label="交车日期" prop="overDate">
			            	<Date-picker type="date"  v-model="vo.overDate" v-bind:disabled="detailReadonly" placement="bottom-end" placeholdbottomer="选择日期"></Date-picker>
			            </Form-item>
            		</i-col>
           		</row>
           		<row>
           			<i-col span="8">
			            <Form-item label="保险公司" prop="insurancecompanyName">
			            	<i-input v-model="vo.insurancecompanyName" placeholder="保险公司" icon="eye" readonly="readonly" @on-click="selectInsurance(index)"/>
			            </Form-item>
           			</i-col>
					<i-col v-if="vo.insuranceType == 1" span="8">
						<Form-item label="员工利润百分比" prop="insurancePoundage">
							<i-input v-model="vo.insurancePoundage" placeholder="员工利润百分比" v-bind:readonly="detailReadonly"/>
						</Form-item>
					</i-col>

					<i-col v-if="vo.insuranceType == 2" span="8">
						<Form-item label="全额百分比" prop="insurancePoundage">
							<i-input v-model="vo.insurancePoundage" placeholder="全额百分比" v-bind:readonly="detailReadonly"/>
						</Form-item>
					</i-col>
					<i-col v-if="vo.insuranceType == 3" span="8">
						<Form-item label="固定金额" prop="insurancePoundage">
							<i-input v-model="vo.insurancePoundage" placeholder="固定金额" v-bind:readonly="detailReadonly"/>
						</Form-item>
					</i-col>
           		</row>
           		<row>
           			<i-col span="8">
			            <Form-item label="交强险" prop="trafficCost">
			                <i-input v-model="vo.trafficCost" placeholder="交强险" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
           			<i-col span="8">
			            <Form-item label="商业险" prop="insuranceCost">
			                <i-input v-model="vo.insuranceCost" placeholder="保险费用" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
           		</row>
           		<row>
            		<i-col span="8">
			            <Form-item label="上牌费用" prop="plateCost">
			                <i-input v-model="vo.plateCost" placeholder="上牌费用" v-bind:readonly="detailReadonly"/>
			            </Form-item>
            		</i-col>
            		<i-col span="8">
			            <Form-item label="购置税" prop="acquireCost">
			                <i-input v-model="vo.acquireCost" placeholder="购置税" v-bind:readonly="detailReadonly"/>
			            </Form-item>
            		</i-col>
            	</row>
           		<row>
           			<i-col span="8">
			            <Form-item label="付款方式" prop="payment">
			            	<Radio-group v-model="vo.payment" @on-change="changePayment(index)">
			                    <Radio label="1" v-bind:disabled="detailReadonly">
			                        <span>全款</span>
			                    </Radio>
			                    <Radio label="2" v-bind:disabled="detailReadonly">
			                        <span>分期</span>
			                    </Radio>
			                </Radio-group>
			            </Form-item>
           			</i-col>
           			<i-col span="6">
	                    <Form-item v-if="!detailReadonly">
	                        <i-button type="error" @click="deleteMedal(index)"> <i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
	                    </Form-item>
	                </i-col>
           		</row>
           		<row v-show="2==vo.payment">
					<i-col span="8">
						<Form-item label="金融公司" prop="financecompanyName">
							<i-input v-model="vo.financecompanyName" placeholder="金融公司" icon="eye" readonly="readonly" @on-click="selectFinance(index)"/>
						</Form-item>
					</i-col>
					<i-col span="8">
			            <Form-item label="按揭费用" prop="financePoundage">
			                <i-input v-model="vo.financePoundage" placeholder="按揭费用" v-bind:readonly="detailReadonly"/>
			            </Form-item>
            		</i-col>
            	</row>
           		<row v-show="2==vo.payment">
           			<i-col span="8">
			            <Form-item label="首付" prop="downPayment">
			                <i-input v-model="vo.downPayment" placeholder="首付" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
           			<i-col span="8">
			            <Form-item label="贷款金额" prop="loanCost">
			                <i-input v-model="vo.loanCost" placeholder="贷款金额" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
           		</row>
           		<row v-show="2==vo.payment">
           			<i-col span="8">
			            <Form-item label="期数" prop="nper">
			                <i-input v-model="vo.nper" placeholder="期数" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
           			<i-col span="8">
			            <Form-item label="月供" prop="monthPayment">
			                <i-input v-model="vo.monthPayment" placeholder="月供" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
            	</row>
           		<row v-show="2==vo.payment">
           			<i-col span="8">
			            <Form-item label="首付款合计" prop="downPaymentSum">
			                <i-input v-model="vo.downPaymentSum" placeholder="首付款合计" @on-change="changeResidue" v-bind:readonly="detailReadonly"/>
			            </Form-item>
           			</i-col>
            	</row>
            	<row>
            		<i-col span="8">
			            <Form-item label="精品总额" prop="boutiqueSumCost">
			                <i-input v-model="vo.boutiqueSumCost" placeholder="精品总额" v-bind:readonly="detailReadonly"/>
			            </Form-item>
            		</i-col>
            		<i-col span="6">
	                    <Form-item v-if="!detailReadonly">
	                        <i-button type="primary" @click="addSaleBoutique(index)"> <i class="fa fa-trash-o"></i>&nbsp;添加精品</i-button>
	                    </Form-item>
	                </i-col>
            	</row>
            	<template v-for="bean,iIndex in vo.saleBoutiqueList"  v-if="bean.showbp">
            		<row>
	           			<i-col span="8">
				            <Form-item label="精品名称" prop="boutiqueName">
				                <i-input v-model="bean.boutiqueName" placeholder="精品名称" icon="eye" readonly="readonly" @on-click="selectBoutiqueModel(index,iIndex)"/>
				            </Form-item>
	           			</i-col>
	           			<i-col span="4">
				            <Form-item label="数量" prop="num">
				                <i-input type="number" min="1" v-model="bean.num" placeholder="数量"/>
				            </Form-item>
	           			</i-col>
	           			<i-col span="6">
	                    <Form-item>
	                        <i-button type="error" @click="deleteBoutique(index,iIndex)"> <i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
	                    </Form-item>
	                </i-col>
	           		</row>
            		<!-- <row>
	           			<i-col span="4">
				            <Form-item label="数量" prop="num">
				                <i-input type="number" min="1" v-model="bean.num" placeholder="数量"/>
				            </Form-item>
	           			</i-col>
	           			<i-col span="4">
				            <Form-item label="销售价格" prop="sumCost">
				                <i-input v-model="bean.sumCost" placeholder="销售价格"/>
				            </Form-item>
	           			</i-col>
	           			<i-col span="4">
				            <Form-item label="建议价格" prop="price">
				                <i-input v-model="bean.price" placeholder="建议价格" readonly="readonly"/>
				            </Form-item>
	           			</i-col>
	           		</row> -->
            	</template>
            </template>
            <Form-item label="备注" prop="content">
                <i-input v-model="saleBook.content" placeholder="备注"/>
            </Form-item>
           	<Form-item v-if="cancelOper">
            	<i-button type="primary" @click="cancel" style="margin-left: 8px"/>确认</i-button>
            	<i-button type="ghost" @click="reload" style="margin-left: 8px"/>返回</i-button>
            </Form-item>
           	<Form-item v-if="approveOper">
            	<i-button type="primary" @click="audityes" style="margin-left: 8px"/>同意</i-button>
            	<i-button type="warning" @click="auditno" style="margin-left: 8px"/>拒绝</i-button>
            	<i-button type="ghost" @click="reload" style="margin-left: 8px"/>返回</i-button>
            </Form-item>
           	<Form-item v-if="receiptOper">
            	<i-button type="primary" @click="receipt" style="margin-left: 8px"/>确认收款</i-button>
            	<i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
            </Form-item>
           	<Form-item v-if="allotOper">
            	<i-button type="primary" @click="allot" style="margin-left: 8px"/>确认分车</i-button>
            	<i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
            </Form-item>
            <Form-item v-if="editBook">
                <i-button type="primary" v-if="!detailReadonly" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
                <i-button type="ghost" v-if="!detailReadonly" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
            </Form-item>
        </i-form>
	</Card>
</div>

<script th:src="@{../statics/js/sale/salebook.js}"></script>
</body>
</html>